<template>
  <div class="interAssign">
    <div class="table-header">
      <p>面试安排</p>
      <div class="search-bar">
        <input v-model="name" type="text" placeholder="职位名称" @keyup.enter="paramSearch(name)">
        <div class="btn primary" @click="paramSearch(name)">搜索</div>
      </div>
    </div>
    <main>
      <GeminiScrollbar
        class="scrollable-table left"
        :autoshow="true"
        @ready="initScrollbarLeft">
        <table class="table fixed-top" :class="{ shadow: hasShadow_left }">
          <thead>
            <tr>
              <th style="width:40px"></th>
              <th>职位名称</th>
            </tr>
          </thead>
        </table>
        <table class="table">
          <tbody>
            <template v-for="pos in posData">
              <tr :key="pos.id">
                <td class="expend">
                  <img @click="expend($event)" src="@/assets/img/u4210.png"/>
                </td>
                <td
                  class="hoverable title"
                  @click="switchPosId(pos, pos.id)"
                  :class="{ chosen: pos.id === chosenPos }">{{ pos.name }}</td>
              </tr>
              <tr :key="pos.id + 10000" style="display:none">
                <td class="middle-container" colspan="8">
                  <div class="middle">
                    <div class="container">
                      <div>
                        <span class="title">工作城市</span> {{ pos.cityName }}<br>
                        <span class="title">学历要求</span> {{ pos.eduName }}<br>
                      </div>
                      <div>
                        <span class="title">薪资范围</span>
                        {{ pos.minSalary + '~' + pos.maxSalary + '/月'}}<br>
                        <span class="title">工作经验</span> {{ pos.exp }}<br>
                      </div>
                    </div>
                    <div class="title">工作地点</div><p>{{ pos.loc }}</p>
                    <div class="title">职位描述</div><p>{{ pos.desc }}</p>
                  </div>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </GeminiScrollbar>
      <GeminiScrollbar
        :autoshow="true"
        class="scrollable-table right">
        <table class="table">
          <thead>
            <tr>
              <th>求职者姓名</th>
              <th>学历</th>
              <th>工作经验</th>
              <th>电话</th>
              <th>邮箱</th>
              <th>面试官</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="people of applyData" :key="people.id">
              <td>{{ people.name }}</td>
              <td>{{ people.edubg }}</td>
              <td>{{ people.exp }}</td>
              <td>{{ people.tel }}</td>
              <td>{{ people.email }}</td>
              <td :class="{
                warn: people.interviewer == null,
                success: people.interviewer != null,
              }">
                {{ people.interviewer == null ? '未分配' : people.interviewer }}
              </td>
              <td v-if="people.status === '0'">
                <a @click="refute(people)">拒绝</a>
                &nbsp;
                <a @click="jumpApplyerInfo(people.id, people.deliverId)">
                  查看
                </a>
              </td>
              <td v-if="people.status === '1'">
                <a @click="refute(people)">驳回</a>&nbsp;&nbsp;<a @click="accept(people)">通过</a>
              </td>
              <td v-if="people.status === '2'" class="success">
                已拒绝
              </td>
              <td v-if="people.status === '3'" class="success">
                已通过
              </td>
            </tr>
          </tbody>
        </table>
      </GeminiScrollbar>
    </main>
  </div>
</template>
<script>
/* eslint-disable no-param-reassign */
import api from '@/api/interAssign';

function getEduName(id) {
  switch (id) {
    case '0':
      return '小学';
    case '1':
      return '初中';
    case '2':
      return '高中';
    case '3':
      return '专科';
    case '4':
      return '本科';
    case '5':
      return '研究生';
    case '6':
      return '博士';
    default:
      return '小学';
  }
}
function getCityName(id, citys) {
  for (let i = 0; i < citys.length; i += 1) {
    if (citys[i].businessId === id) {
      return citys[i].name;
    }
  }
  return null;
}
async function getCity() {
  const response = await api.getCityApi();
  // this.allCity = response.data.data;
  return response.data.data;
}
// eslint-disable-next-line consistent-return
function findAllApplyer(alluser, id) {
  const res = [];
  const datas = alluser;
  for (let i = 0; i < datas.length; i += 1) {
    let interviewerName = null;
    if (datas[i].bdeliveryInterview != null) {
      interviewerName = datas[i].binterview.linkMan;
    }
    res.push({
      caid: datas[i].bcandidate.businessId,
      id: datas[i].sysUser.businessId,
      name: datas[i].sysUser.realname,
      edubg: getEduName(datas[i].bcandidate.educated),
      exp: datas[i].bcandidate.experience,
      interviewer: interviewerName,
      tel: datas[i].sysUser.phone,
      email: datas[i].sysUser.email,
      jobid: id,
      status: datas[i].bdelivery.status,
      deliverId: datas[i].bdelivery.businessId,
    });
  }
  return res;
}
async function queryBJobsAndUsern(name, citys) {
  const posData = [];
  // this.posData = [];
  const params = new URLSearchParams();
  params.append('recruiterId', sessionStorage.getItem('recruiterId'));
  params.append('name', name);
  const response = await api.queryBJobsAndUsernApi(params);
  const datas = response.data.rows;
  for (let i = 0; i < datas.length; i += 1) {
    posData.push({
      id: datas[i].bjob.businessId,
      name: datas[i].bjob.name,
      city: datas[i].bjob.expectCity,
      cityName: getCityName(datas[i].bjob.expectCity, citys),
      edubg: datas[i].bjob.educated,
      eduName: getEduName(datas[i].bjob.educated),
      exp: datas[i].bjob.experience,
      minSalary: datas[i].bjob.minSalary,
      maxSalary: datas[i].bjob.maxSalary,
      loc: datas[i].bjob.cityDesc,
      desc: datas[i].bjob.description,
      alluser: datas[i].candidateInfos,
    });
  }
  return posData;
}


export default {
  name: 'InterAssign',
  beforeRouteEnter(from, to, next) {
    if (sessionStorage.getItem('userToken') === null || sessionStorage.getItem('loginType') !== '3') {
      next({ path: '/login' });
    }
    getCity().then((citys) => {
      queryBJobsAndUsern('', citys).then((positions) => {
        next((vm) => {
          vm.$emit('route-switch', window.location.href.split('/').pop());
          vm.allCity = [...citys];
          vm.posData = [...positions];

          vm.chosenPos = positions[0].id;
          vm.switchPosId(positions[0], positions[0].id);
        });
      });
    });
  },
  data() {
    return {
      name: '',
      chosenPos: null,
      posData: [],

      applyData: [],
      allCity: [],
      hasShadow_left: false,

      geminiScrollbar_left: null,
    };
  },

  methods: {
    async switchPosId(pos, id) {
      this.chosenPos = id;
      // console.log(pos.alluser);
      const res = findAllApplyer(pos.alluser, id);
      if (!res) {
        this.applyData = [];
        return;
      }
      this.applyData = [...res];
      this.$nextTick();
    },
    async paramSearch(name) {
      const positions = await queryBJobsAndUsern(name, this.allCity);
      this.posData = [...positions];
      this.switchPosId(positions[0], positions[0].id);
    },
    expend(e) {
      if (e.currentTarget.className === '') {
        e.currentTarget.className = 'rotate';
      } else {
        e.currentTarget.className = '';
      }
      const display = e.currentTarget.parentNode.parentNode.nextSibling.nextSibling.style.display;
      if (display === 'none') {
        e.currentTarget.parentNode.parentNode.nextSibling.nextSibling.style.display = '';
      } else {
        e.currentTarget.parentNode.parentNode.nextSibling.nextSibling.style.display = 'none';
      }
      this.geminiScrollbar_left.update();
    },
    jumpApplyerInfo(id, deliverId) {
      sessionStorage.setItem('searchUserId', id);
      this.$router.push({ name: 'ApplyerInfo', query: { deliverId } });
    },
    refute(people) {
      this.$confirm('确定拒绝该申请者吗?', async (res) => {
        if (res) {
          if (this.chosenPos === null || this.chosenPos === undefined) {
            // console.log(this.posData);
            if (this.posData.length !== 0) {
              this.chosenPos = this.posData[0].id;
            }
          }

          // console.log(positions);
          const params = new URLSearchParams();
          params.append('candidateId', people.caid);
          params.append('jobId', this.chosenPos);
          params.append('status', '0');
          api.changeStatusApi(params).then(async (response) => {
            if (response.data.code === 200) {
              this.$alert('操作成功');
            } else {
              this.$alert(response.data.message);
            }
            const positions = await queryBJobsAndUsern(this.name, this.allCity);
            this.posData = [...positions];
            this.switchPosId(positions.find(e => e.id === this.chosenPos), this.chosenPos);
          });
        }
      });
    },

    accept(people) {
      this.$confirm('确定通过该申请者吗?', (res) => {
        if (res) {
          if (this.chosenPos === null || this.chosenPos === undefined) {
            if (this.posData.length !== 0) {
              this.chosenPos = this.posData[0].id;
            }
          }
          const params = new URLSearchParams();
          params.append('candidateId', people.caid);
          params.append('jobId', this.chosenPos);
          params.append('status', '1');
          api.changeStatusApi(params).then(async (response) => {
            if (response.data.code === 200) {
              this.$alert('操作成功');
            } else {
              this.$alert(response.data.message);
            }
            const positions = await queryBJobsAndUsern(this.name, this.allCity);
            this.posData = [...positions];
            this.switchPosId(positions.find(e => e.id === this.chosenPos), this.chosenPos);
          });
        }
      });
    },

    initScrollbarLeft(geminiScrollbar) {
      this.geminiScrollbar_left = geminiScrollbar;
    },
  },
};
</script>
<style lang="less">
@import url(../../../../static/style/site.comm.less);
@import url(../../../../static/style/site.vars.less);

.interAssign {
  &>main {
    display: flex;
    justify-content: left;
    .scrollable-table {
      height: 620px;
      overflow-y: scroll;
      background: #fff;
      box-shadow: 0 3px 6px rgba(6,0,1,.05);
      &::-webkit-scrollbar {
        display: none;
      }
      &.left {
        width: 33%;
      }
      &.right {
        width: 100%;
      }
      td.title {
        font-size: 14px;
        font-weight: 600;
        color: @site-main;
      }
      .middle-container {
        box-sizing: border-box;
        padding-left: 10px;
        padding-top: 10px;
        background: rgb(224, 244, 255);
        height: 110px;
        // display: none;
        .middle {
          text-align: left;
          color: rgb(0, 89, 161);
          .container {
            display: flex;
            justify-content: left;
            &>div {
              margin-right: 20px;
            }
          }
          &>p {
            margin-bottom: 10px;
          }
          &>div.title {
            margin-bottom: 0;
          }
          .title {
            user-select: none;
            display: inline-block;
            font-size: 14px;
            color: rgb(78, 175, 255);
            font-weight: 700;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}
</style>
